<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>设备组曲线详情</title>
    <!--<link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="js/echarts.min.js" ></script>-->
    <link th:href="@{/css/base.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/js/rem.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .titel1 {
            font-size: 0.34rem;
            font-weight: bolder;
            margin-top: 0.6rem;
            margin-left: 0.3rem;
        }

        .time1 {
            font-size: 0.18rem;
            margin-left: 0.3rem;
            margin-top: 20px;
            color: #9d9d9d;
        }
    </style>

</head>
<body>
<div class="box">
    <div class="titel1">设备组<span class="a1"></span></div>
    <div class="time1"><span class="start"></span>--<span class="end"></span></div>
    <div class="chart" id="chart" style="height: 300px;width: 100%;margin:auto">
    </div>
    <div class="loading" style="position: fixed;width: 100%;height: 100%;background: white;">
        <img th:src="@{/css/loading.gif}" style="margin: auto;display: block;margin-top: 4rem;"/>
    </div>
</div>
<div class="box1" style="text-align: center;margin-top: 60px;font-size: 0.4rem;"></div>
<script th:inline="javascript">
    var globalList = /*[[${data}]]*/ 'Sebastian';
    var ajaxTag =false;
    if (globalList.code == 200) {
        $(".box").show();
        $(".box1").hide();
        ajaxTag =true;
    } else {
        $(".box1").show();
        $(".box").hide();
        $(".box1").html(globalList.msg);
    }
    var startTime = globalList.startTime
    var endTime = globalList.endTime;
    $(".start").html(startTime);
    $(".end").html(endTime);
    var type = globalList.type;
    var dataUnit ="";
    if (type == 1) {
        $(".a1").html("电流")
        dataUnit = "A";
    } else if (type == 2) {
        $(".a1").html("电压")
        dataUnit = "V";
    } else if (type == 3) {
        $(".a1").html("进水压力")
        dataUnit = "Mpa";
    } else if (type == 4) {
        $(".a1").html("出水压力")
        dataUnit = "Mpa";
    } else if (type == 5) {
        $(".a1").html("进水瞬时流量")
        dataUnit = "m³";
    } else if (type == 6) {
        $(".a1").html("出水瞬时流量")
        dataUnit = "m³";
    }
    var option;
    var myChart;
    var curveData = globalList.list; // 全局曲线数据变量

    // 页面加载完成事件，需保证 页面结构及所有文件资源加载完成
    window.onload = function () {
        $(".loading").hide();

//			$.ajax({
//			        type: "get",
//			        url: "http://192.168.1.163:8080/test/iot/readDataAnalysisCurve_new_xToy",
//			         data: {waterPumpGroupIds:"-1",startTime:"2018-07-08 08:59:59",endTime:"2018-07-08 21:25:12",monitorParam:"4"},
//			        success: function (data) {
//			        	console.log(data);


        myChart_init();
        option_init(); //初始化 option
        if (ajaxTag && (curveData.length == 0 || curveData == 'undefined') ) {
            $(".loading").show();
            $("#chart").hide();
            var reqHost = globalList.reqHost + "/api/iot/dataAnalysis/readDataAnalysisCurve_new_xToy";
            $.ajax({
                type: "post",
                async: true,
                url: reqHost,
                data: {
                    'waterPumpGroupIds': globalList.waterPumpGroupIds,
                    'startTime': startTime,
                    'endTime': endTime,
                    'monitorParam': globalList.monitorParam,
                    'companyCode': globalList.companyCode
                }, success: function (data) {
                    $(".loading").hide();
                    $("#chart").show();
                    if (data.code == 200) {
//                        curveData = data.data ;
                        dataTo_setOption(data.data);
                    } else {
                        $(".box1").show();
                        $(".box").hide();
                        $(".box1").html(data.msg);
                    }
                }
                , error: function () {
                    $(".box1").show();
                    $(".box").hide();
                    $(".box1").html("网络出错");
                }
            });
        } else {
            dataTo_setOption(curveData);
        }

//			 }
//			        
//		})	
    }

    function option_init() {
        if (option == 'undefined' || option == null) {
            option = {

                tooltip: {
                    trigger: 'axis'
                },

                dataZoom: [//给x轴设置滚动条  
//                    {
//                        start: 0,//默认为0
//                        end: 10,
//                        type: 'slider',
//                        show: true,
//                        xAxisIndex: [0],
//                        handleSize: 0,//滑动条的 左右2个滑动条的大小
//                        height: 8,//组件高度
//                        left: 80, //左边的距离
//                        right: 40,//右边的距离
//                        bottom: 26,//右边的距离
//                        handleColor: '#ddd',//h滑动图标的颜色
//                        handleStyle: {
//                            borderColor: "#cacaca",
//                            borderWidth: "1",
//                            shadowBlur: 2,
//                            background: "#ddd",
//                            shadowColor: "#ddd",
//                        },
//                        fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//                            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//                            //给第一个设置0，第四个设置1，就是垂直渐变
//                            offset: 0,
//                            color: '#1eb5e5'
//                        }, {
//                            offset: 1,
//                            color: '#5ccbb1'
//                        }]),
//                        backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
//                        showDataShadow: false,//是否显示数据阴影 默认auto
//                        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
//
//                        filterMode: 'filter'
//                    },
//                    //下面这个属性是里面拖到
//                    {
//                        type: 'inside',
//                        show: true,
//                        xAxisIndex: [0],
//                        start: 0,//默认为1
//                        end: 50
//                    },

                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        bottom: -2,
                        filterMode: 'empty'
                    },
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        bottom: -2,
                        filterMode: 'empty'
                    }

                ],
                showDataShadow: 'false',
                legend: {
                    data: [],
                    type: "scroll"
                },
                grid: {
                    left: '8.5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    name: '时间',
                    nameTextStyle: {
                        color: '#333'
                    },
                    boundaryGap: true
                },
                yAxis: {
                    name: '单位('+dataUnit+')',
                    type: 'value',
                    nameTextStyle: {
                        color: '#333'
                    }
                },
                series: []
            };
        }
    }

    function myChart_init(data) {
        if (myChart == 'undefined' || myChart == null) {
            myChart = echarts.init(document.getElementById("chart"));
            window.onresize = myChart.resize; // 设置岁浏览器大小而变化
        }
    }
    function dataTo_setOption(data) {
        for (var i = 0; i < data.length; i++) {
            var AllCon = [];
            var titles = '';
            AllCon = data[i].valueArr;
            titles = data[i].groupName;
            // console.log(titles);
            option.legend.data.push(titles);
            option.series.push({
                name: titles,
                type: 'line',
                symbolSize: 8,
                data: AllCon,
                connectNulls: true
            });
            myChart.setOption(option);
            // 使用刚指定的配置项和数据显示图表。
        }
    }

</script>
</body>
</html>